<template>
  <view>
    <!-- 搜索 -->
    <view class="search">
      <view class="searchCent">
        <image src="/static/haoIndexListImg/search.png" class="searchImg"></image>
        <input type="text" v-model="inputKey" @input="searchInput" placeholder="搜索城市/区县/地点" class="searchInput" />
      </view>
    </view>
    <view class="currentPosition uni-flex uni-align-center uni-justify-between">
      <view class="currentPositionText uni-flex uni-align-center ">
        <image :src="`${$ImgBaseUrl}map.png`" class="currentImg"></image>当前选择：公元时代城·新都会</view>
      <view class="currentPositionBtn uni-flex uni-align-center ">
        <image :src="`${$ImgBaseUrl}position.png`" class="positionImg"></image>
        重新定位
      </view>
    </view>
    <view class="historyPosition">
      <view class=" uni-flex uni-align-center uni-justify-between">
        <view class="historyPositionText">常用/历史地点</view>
        <view class="all uni-flex uni-align-center">全部<uni-icons type="right" size="15" style="margin-left:16rpx;" color="#999999"></uni-icons></view>
      </view>
      <scroll-view scroll-y>
        <view class="historyPositionItem">居然之家创科大厦 13层</view>
        <view class="historyPositionItem">居然之家创科大厦 13层</view>
        <view class="historyPositionItem">迎泽区并州北路48号</view>
        <view class="historyPositionItem">迎泽区并州北路48号</view>
        <view class="historyPositionItem">迎泽区并州北路48号</view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputKey: ''
    }
  },
  methods: {
    searchInput() {
      this.$emit('searchInput', this.inputKey)
    }
  }
}
</script>

<style lang="scss" scoped>
.position{
  background-color: #F5F5F5;
}
/* 搜索 */
.search {
  width: 100%;
  display: flex;
  padding: 41rpx 24rpx 28rpx;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  z-index: 99;
  background-color: #fff;
  .searchCent {
    width: 100%;
    height: 72rpx;
    background-color: #F1F1F1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 36rpx;
    padding: 0 33rpx;
    box-sizing: border-box;

    .searchImg {
      width: 32rpx;
      height: 32rpx;
      margin-right: 25rpx;
    }

    .searchInput {
      flex: 1;
      height: 72rpx;
      font-size: 28rpx;
    }
  }
}
.currentPosition {
  padding:26rpx;
  .currentPositionText{
    font-weight: 600;
    font-size: 30rpx;
    color: #333333;
    .currentImg{
      width:24rpx;
      height:30rpx;
      margin-right:16rpx;
    }
  }
  .currentPositionBtn{
    font-weight: 400;
    font-size: 24rpx;
    color: #2F80ED;
    .positionImg{
      width:24rpx;
      height:24rpx;
      margin-right:16rpx;
    }
  }
}
.historyPosition{
  height:calc(100vh - 234rpx);
  box-sizing: border-box;
  padding:39rpx 26rpx 0;
  background: #FFFFFF;
  border-radius: 30rpx 30rpx 0rpx 0rpx;
  .historyPositionText{
    font-weight: 400;
    font-size: 28rpx;
    color: #999999;
  }
  .all{
    font-weight: 400;
    font-size: 28rpx;
    color: #999999;
  }
  .historyPositionItem{
    font-weight: 400;
    font-size: 30rpx;
    color: #333333;
    margin:30rpx 0;
  }
}
</style>